<template>
  <div class="tab-control">
    <van-tabs v-model:active="currentActive" @click-tab="changeTab">
      <van-tab v-for="(item, index) in titles" :key="index" :title="item"></van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const currentActive = ref(0)

defineProps({
  titles: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const changeTab = (e) => {
  emit('changeTab', e, )
}
const changeIndex = (index) => {
  currentActive.value = index
}
const emit = defineEmits(['changeTab'])
defineExpose({
  changeIndex,
})
</script>

<style lang="scss" scoped>
.tab-control {
  width: 100%;
  z-index: 100;
  position: fixed;
}
</style>
